<template>
  <view class="md-item-class-component" @click="turnVideo">
    <image  class="item-cover" v-if="classInfo.cover" :src="`https://www.aikoolearn.com/video-dev${classInfo.cover}`" alt="">
		<view class="content">
			<p class="title ellipsis2">{{ classInfo.title ||classInfo.videoTitle}}</p>
			<view class="footer"> <image v-if="classInfo.lecturerAvatar" :src="`https://www.aikoolearn.com/video-dev${classInfo.lecturerAvatar}`" alt="">
			   <image v-else src="/static/img/teacheravater.png" alt="">
			  <span>{{
			    classInfo.lecturer }}</span>  <span>免费</span>
			</view>
		</view>
   
  </view>
</template>
<script>
export default {
  props: {
    classInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    isLogin() {
      return uni.getStorageSync('isLogin')
    },
    userInfo() {
      return JSON.parse(uni.getStorageSync('userInfo'))
    }
  },
  methods: {

    turnVideo() {
      if (this.isLogin) {
        if (this.classInfo.videoId) {
		  uni.navigateTo({
		  	url: '/pages/course/courseDetails?rid='+this.classInfo.videoId
		  });
         
        } else {
         uni.navigateTo({
         	url: '/pages/course/courseDetails?rid='+this.classInfo.rid
         });
        }

      } else {
       uni.showToast({
       	title: '未登录',
       	icon: 'error',
       	duration: 500
       });
      }
    }
  }
}
</script>
<style lang="less" scoped>
.md-item-class-component {
  width: 167px;
  margin:9px ;
box-shadow: 0 12px 20px 0 rgba(95, 101, 105, .1);
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;


  .item-cover {
    width: 100%;
    height: 111px;
    background: no-repeat center/cover;
    margin-bottom: 8px;
    border-radius:  8px  8px 0 0;
    overflow: hidden;
  }
  .content{
	  height: 90px;
	  position: relative;
  }

  .title {
    width:97%;
    color: #000000;
     font-size: 15px;
    font-weight: 500;
    font-family: SourceHanSansCN, SourceHanSansCN;
    padding: 0  8px;
  }

  .ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .one,
  .two {
    font-size: 22.901rpx;
    color: #9199a1;
    line-height: 34.351rpx;
    padding: 0 8px;
    margin-bottom: 8px;
    height: 38.168rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0px 8px;
    position: absolute;
    bottom: 0px;

    image {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0;

    }

    >:nth-child(2) {
      color: #000000;
      margin-left: 15.267rpx;
		font-size: 12px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      color: #666666;
      line-height: 34.351rpx;
    }

    >:nth-child(3) {
      line-height: 61.069rpx;
   
font-size: 14px;
     
      color: #FF6108;
      border-radius: 30.534rpx;
      text-align: center;
      position: absolute;
      right:28px;
    }
  }
}
</style>